---
title: Cool Mode
date: 2024-06-01
description: Cool mode effect for buttons, links, and other DOMs
author: Bankkroll
published: true
---

<ComponentPreview name="cool-mode-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/cool-mode
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cool-mode" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Custom Particle

<ComponentPreview name="cool-mode-custom" />

### Usage

```tsx showLineNumbers
import { CoolMode } from "@/components/ui/cool-mode"
```

```tsx showLineNumbers
<CoolMode>
  <button>Click me</button>
</CoolMode>
```

## Props

| Prop            | Type     | Default    | Description                            |
| --------------- | -------- | ---------- | -------------------------------------- |
| `particle`      | `String` | `"circle"` | The particle URL for a custom particle |
| `size`          | `Number` | `Varies`   | Size of the particle                   |
| `particleCount` | `Number` | `Varies`   | The number of particles to generate    |
| `speedHorz`     | `Number` | `Varies`   | Horizontal speed of the particles      |
| `speedUp`       | `Number` | `Varies`   | Upward speed of the particles          |

## Credits

- Credit to [Bankk](https://www.x.com/bankkroll_eth)
- Inspired by [ClickFusion](https://github.com/BankkRoll/ClickFusion)
